<template>
  <div v-for="msg in messages" :key="msg.id" class="layout">
    <!--    :class 来根据 msg.type 的值动态地添加或不添加 justify-end 类-->
    <div :class="{'justify-end' :msg.type==='question'}" class="flex">
      <div>
        <!--日期-->
        <div :class="{'text-right' :msg.type==='question'}" class="text-sm text-gray-500 mb-0.5">
          {{ msg.createAt }}
        </div>
        <!--提问内容-->
        <div v-if="msg.type==='question'" class="question">
          {{ msg.content }}
        </div>
        <!--回答内容-->
        <div v-else class="answer">
          <div v-if="msg.status==='loading'" class="flex items-center gap-2">
            <span>🤔思考中</span>
            <Icon height="20" icon="eos-icons:bubble-loading" width="20"></Icon>
            <!--<Icon height="20" icon="eos-icons:three-dots-loading" width="20"></Icon>-->
          </div>
          <template v-else>
            {{ msg.content }}
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {MessageProps} from "@/type";

defineProps<{ messages: MessageProps[] }>();
</script>

<style lang="scss" scoped>
.layout {
  //@apply ;

  .question {
    @apply p-2 rounded-md;
    background-color: $primary;
    color: $DF-COLOR;
  }

  .answer {
    @apply p-2 rounded-md ;
    background-color: $success;
  }
}
</style>
